import { View, Image, Text, publishDps } from '@ray-js/ray';
import clsx from 'clsx';
import React from 'react';
import res from '@/res/image';

import Strings from '@/i18n';
import { useProps } from '@ray-js/panel-sdk';
import Styles from './index.module.less';

export function BotBar({ doubleCheck }: { doubleCheck: (params: any) => void }) {
  const {
    switch: _switch,
    smooth_sand: smoothSand,
    pour_sand: pourSand,
    manual_clean: manualClean,
  } = useProps();

  const list = [
    {
      title: 'manual',
      icon: res.manual,
      active: manualClean,

      onClick: () => {
        // manualClean(true);
        publishDps({ manual_clean: !manualClean });
      },
    },
    {
      title: 'pourSand',
      icon: res.remove,
      active: pourSand,
      style: {
        height: '72rpx',
        width: '84rpx',
        marginTop: '8rpx',
      },
      onClick: () => {
        // pourSand(true);

        doubleCheck({
          show: true,
          title: Strings.getLang('pourSand'),
          tips: Strings.getLang(pourSand ? 'pourSand_on' : 'pourSand_off'),
          onConfirmCallBack: () => {
            publishDps({ pour_sand: !pourSand });
          },
        });
      },
    },
    {
      title: 'smood',
      icon: res.smood,
      style: {
        height: '72rpx',
        width: '88rpx',
        marginLeft: '16rpx',
        marginTop: '16rpx',
      },
      active: smoothSand,
      onClick: () => {
        // smoothSand(true);
        publishDps({ smooth_sand: !smoothSand });
      },
    },
    {
      title: 'sterlize',
      icon: res.sterlize,
      style: {
        height: '72rpx',
        width: '84px',
        marginTop: '14rpx',
      },
      active: _switch,
      onClick: () => {
        // _switch(true);
        publishDps({ switch: !_switch });
      },
    },
  ];
  return (
    <View className={clsx(Styles.wrapper)}>
      {list.map(item => {
        const isActive = item.active;

        return (
          <View key={item.title} className={clsx(Styles.itembox)} onClick={item.onClick}>
            <View className={clsx(Styles.item, isActive && Styles['item-active'])}>
              <Image src={item.icon} className={clsx(Styles.icon)} style={item.style} />
            </View>
            <Text className={clsx(Styles.title)}>{Strings.getLang(item.title)}</Text>
          </View>
        );
      })}
    </View>
  );
}
